<template>
    <div class="edit-dialog-container">
        <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px" destroy-on-close>
            <el-form ref="dialogFormRef" :model="state.content" :rules="formRules" size="default" label-width="100px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item prop="code" label="单元楼编号">
                            <el-input v-model="state.content.code" placeholder="请输入单元楼名称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item prop="name" label="单元楼名称">
                            <el-input v-model="state.content.name" placeholder="请输入单元楼名称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item prop="floorTotal" label="最高楼层">
                            <el-input-number :max="16" v-model="state.content.floorTotal" placeholder="请输入最高楼层"
                                clearable></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item prop="areaCode" label="关联区域">
                            <el-select v-model="state.content.areaCode" class="m-2" placeholder="请选择区域">
                                <el-option v-for="item in state.areaList" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onSubmitContinue" type="primary" size="default" v-if="state.dialog.type === 0">{{
                        t('message.btnName.continueSubmit')
                    }}</el-button>
                    <el-button @click="onSubmit" type="success" size="default">{{ t('message.btnName.submit')
                    }}</el-button>
                    <el-button @click="onCancel" size="default">{{ t('message.btnName.cancel') }}</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" >
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { ElMessage } from 'element-plus';
import { usePersonEmployeePageApi } from '/@/api/person/employee';
import { usePosCategoryListApi } from '/@/api/pos/category';
import { usePosWalletCreateApi, usePosWalletQueryApi, usePosWalletUpdateApi } from '/@/api/pos/wallet';
import { useLadderAreaListApi } from '/@/api/ladder/area';
import { useLadderUnitCreateApi, useLadderUnitQueryApi, useLadderUnitUpdateApi } from '/@/api/ladder/building';

// 定义子组件向父组件传值/事件
const { t } = useI18n();
const emit = defineEmits(['refresh']);

// 定义变量内容
const dialogFormRef = ref();

const useContent = () => {
    return {
        code: '',
        name: '',
        floorTotal: null,
        areaCode: '',
    }
}

const state = reactive({
    content: {} as any,
    dialog: {
        isShowDialog: false,
        type: 0,
        title: '',
        isShowLoading: false,
    },
    areaList: [] as any,
});

// 表单校验
const formRules = ref({
    code: [
        { required: true, message: '必填项不能为空', trigger: 'blur' },
    ],
    name: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
    floorTotal: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
})

const getrAreaList = () => {
    useLadderAreaListApi().then(({ content }) => {
        state.areaList = content.map((item: any) => {
            return {
                value: item.code,
                label: item.name,
            }
        })
    })
}

// 打开弹窗
const openDialog = async (code?: string) => {
    state.dialog.isShowDialog = true
    if (code) {
        state.dialog.title = t('message.btnName.edit')
        state.dialog.type = 1
        queryItem(code)
    } else {
        state.dialog.title = t('message.btnName.addRow')
        state.dialog.type = 0
        state.content = useContent()
        getrAreaList()
    }
};
// 关闭弹窗
const closeDialog = () => {
    state.dialog.isShowDialog = false;
    state.content = useContent()
    emit('refresh');
};
// 取消
const onCancel = () => {
    closeDialog();
};
const queryItem = (code: string) => {
    useLadderUnitQueryApi(code).then(({ content }) => {
        state.content = content
    })
}
// 提交
const onSubmit = () => {
    if (state.dialog.type === 1) {
        useLadderUnitUpdateApi(state.content).then(({ content }) => {
            console.log(content);
        }).then(() => {
            closeDialog()
        })
    } else {
        useLadderUnitCreateApi(state.content).then(({ content }) => {
            console.log(content);
        }).then(() => {
            closeDialog()
        })
    }
};
// 提交
const onSubmitContinue = () => {
    useLadderUnitCreateApi(state.content).then(() => {
        ElMessage({
            type: 'success',
            message: '新增成功'
        })
    }).then(() => {
        state.content = useContent()
    })
};

defineExpose({
    openDialog,
});
</script>


<style scoped lang="scss">
:deep(.el-dialog__header) {
    margin: 0;
    border-bottom: 1px dashed rgba(0, 0, 0, .2);
}

:deep(.el-dialog__footer) {
    border-top: 1px dashed rgba(0, 0, 0, .2);
}
</style>